<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body{
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-090912%2Fzdoxjzaytpuzdoxjzaytpu.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647588060&t=985429ad292532e8a0236520bda4fa72);
            background-size: 100%;
        }
        fieldset{
            width: 400px;
            height: 400px;
            padding: 20px;
            border: 0px  solid red;
            border-radius: 15px;
            margin: 200px 1100px;
            background-color: transparent;
        }

    </style>
</head>
<body>
<div id="app" style="color: #FFFFFF;">
    <fieldset>
        <legend style="font-size: 40px;">忘记密码</legend>
        <el-form :model="userInfo" status-icon :rules="rules" ref="userInfo" label-width="100px" class="demo-ruleForm" >

            <a style="color: deepskyblue;margin-left: 320px;" href="/ssm/customer.html">立即登录</a>

            <el-form-item  prop="username">
                账号:<el-input  v-model="userInfo.username" ></el-input>
            </el-form-item>

            <el-form-item prop="telephone">
                手机号: <el-input size="medium" v-model="userInfo.telephone" maxlength="11"></el-input>
            </el-form-item>

            <el-form-item  prop="code">
                验证码: <el-input  v-model="userInfo.code" >
                <el-button slot="append" @click="sendCode()" id="foo">获取验证码</el-button>
            </el-input>
            </el-form-item>

            <el-form-item  prop="password">
                新密码: <el-input type="password" v-model="userInfo.password" ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="updateUser('userInfo')" style="width: 300px;">确认</el-button>
            </el-form-item>
        </el-form>

    </fieldset>

</div>
<script>
    var checkMobile = (rule, value, callback) => {
        if (value === "") {
            callback(new Error("手机号不可为空"));
        } else {
            if (value !== "") {
                var reg = /^1[3-9]\d{9}$/;
                if (!reg.test(value)) {
                    callback(new Error("请输入有效的手机号码"));
                }
            }
            callback();
        }
    };
    var haha = new Vue({
        el:"#app",
        data:{
            userInfo:{},
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 3, max: 16, message: '长度在 3 到 16  个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 16, message: '长度在 3 到 16  个字符', trigger: 'blur' }
                ],
                telephone: [
                    { required: true, message: "请输入手机号", trigger: "blur" },
                    {
                        validator: checkMobile,
                        min: 11,
                        max: 11,
                        message: "手机号格式错误",
                        trigger: "blur",
                    },
                ]
            }
        },
        methods:{
            sendCode(){
                if (haha.userInfo.telephone==null){
                    haha.$message({
                        message: '手机号不能为空',
                        type: 'error'
                    })
                }else {
                    $.get("/ssm/customer/sendCode?telephone="+haha.userInfo.telephone,function (backData) {
                        if (backData.code==1){
                            haha.$message.success('短信已发送');
                        }
                    });
                    // 按钮失去点击效果
                    foo.disabled = "disabled";
                    // 标题变成正在发送(59)
                    var i = 59;
                    var t = setInterval(function(){
                        foo.innerHTML = "正在发送("+i+"s)";
                        i--;
                        if(i==0){
                            //标题变成发送验证码
                            foo.innerHTML = "发送验证码";
                            //恢复点击效果
                            foo.disabled = "";
                            //停止定时器
                            clearInterval(t);
                        }
                    },1000)
                }
            },
            updateUser() {
                haha.$refs["userInfo"].validate((valid) => {
                    if (valid) {
                        $.post("/ssm/customer/updatePassword",haha.userInfo,function(backData){
                            if(backData.code == 2){
                                haha.$notify.error({
                                    title: "温馨提示",
                                    message: backData.msg
                                });
                            }else if(backData.code == 1){
                                haha.$message({
                                    message: '恭喜你，修改成功',
                                    type: 'success'
                                });

                            }
                        });
                    }
                });
            },

        }
    });

</script>
</body>
</html>